<template>
  <el-form class="login-form" ref="form" :model="form">
    <el-form-item>
      <el-input
        style="width:100%"
        @keyup.enter.native="onSubmit"
        @blur="nameInputBlur(form.name)"
        v-model="form.name"
        placeholder="用户名"
      >
        <template slot="prepend">
          <i class="iconfont icon-fl-renyuan" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-input
        style="width:100%"
        @keyup.enter.native="onSubmit"
        v-model="form.password"
        :type="passwordVisible ? 'text': 'password'"
        placeholder="密码"
      >
        <template slot="prepend">
          <i class="iconfont icon-lock" />
        </template>
        <template slot="append">
          <span class="append__eye-btn" @click="togglePasswordVisible">
            <i
              class="iconfont"
              :class="{
              'icon-chakan': passwordVisible,
              'icon-biyan': !passwordVisible
            }"
            />
          </span>
        </template>
      </el-input>
    </el-form-item>
    <!-- 验证码 -->
    <div v-if="codeImageUrl" class="login-form__code-wrap">
      <el-form-item class="login-form__code">
        <el-input @keyup.enter.native="onSubmit" v-model="form.code" placeholder="验证码">
          <template slot="prepend">
            <i class="iconfont icon-yanzhengma" />
          </template>
        </el-input>
      </el-form-item>
      <el-tooltip content="点击刷新验证码" placement="right">
        <img @click="onClickVerificationCode(form.name)" :src="codeImageUrl" />
        <!-- <img src="../assets/images/WX20180817-094529.png" /> -->
      </el-tooltip>
    </div>
    <el-alert
      v-show="showErrMessage"
      :title="errorMessage"
      class="login-form__error-message"
      show-icon
      type="error"
    ></el-alert>
    <!-- <el-form-item v-if="isValidate">
      <FeokValidate ref="feokValidate" @on-validate-success="validateSuccess"></FeokValidate>
    </el-form-item>-->
    <el-form-item>
      <el-button
        class="login-form__login-btn"
        type="primary"
        :loading="loading"
        :disabled="!!isValidate && !hasValidate"
        @click="onSubmit"
      >{{buttonText}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
// 登录表单
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import storage from "@/utils/Storage";
import FeokValidate from "@/components/FeokValidate"; // 登录表单

@Component({
  components: {
    FeokValidate
  }
})
export default class LoginForm extends Vue {
  get buttonText() {
    return this.loading ? "登录中..." : "登录";
  }

  get showErrMessage() {
    return !!this.errorMessage.length;
  }
  @Prop(Boolean) public loading!: boolean;
  @Prop(String) public errorMessage!: string;
  @Prop(String) public codeImageUrl!: string; // 验证码Url

  public form = {
    name: storage.get("o/account") || "", // 账号
    password: "", // 密码
    code: "", // 验证码
    sessionId: "",
    token: "",
    sig: "",
    scene: ""
  };
  public passwordVisible = false;

  private isValidate = false; // 是否需要验证
  private hasValidate = false; // 是否已经验证

  /**
   * 对外API，重置code
   */
  public resetVerificationCode() {
    this.form.code = "";
  }

  public togglePasswordVisible() {
    this.passwordVisible = !this.passwordVisible;
  }

  public onSubmit(): void {
    const { name, password, code, sessionId, token, sig, scene } = this.form;
    this.$emit(
      "login",
      name,
      password,
      code,
      sessionId,
      token,
      sig,
      scene,
      this.isValidate
    );
  }

  @Emit()
  public onClickVerificationCode(name: string) {}

  @Emit()
  public nameInputBlur(name: string) {}

  public validateSuccess(callback: any) {
    this.hasValidate = true;
    this.form.sessionId = callback.csessionid;
    this.form.sig = callback.sig;
    this.form.token = callback.token;
    this.form.scene = callback.scene;
  }

  public async mounted() {
    try {
      // const {aliAfsFlg} = await getPublicAuthLoginAliafsflg();
      // this.isValidate = aliAfsFlg;
    } catch (error) {}
  }
}
</script>

<style lang="less">
.login-form {
  width: 100%;
  &__login-btn {
    width: 100%;
  }
  .el-input {
    .el-input-group__prepend {
      background: transparent;
      border: 0px;
      padding: 2px 0px 0 20px;
    }
    .el-input-group__append {
      background: transparent;
      border: 0px;
      .append__eye-btn {
        cursor: pointer;
      }
    }
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #eee;
      height: 50px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #40495d inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #40495d;
    border-radius: 5px;
    color: #454545;
  }
  &__code {
    width: 310px;
    .el-input-group__append {
      padding-right: 0;
    }
  }
  &__code-wrap {
    display: flex;
    flex-direction: "row";
    img {
      cursor: pointer;
      margin-left: 8px;
      margin-top: 2px;
      height: 49px;
    }
  }
  &__error-message {
    margin-bottom: 18px;
  }
}
</style>
